import React from 'react';
import { Button, Col, Row } from 'antd';
import './styles.less';
import * as Icons from '@ant-design/icons';

const customIcons: { [key: string]: any } = Icons;
const addIcon = (name: string) => React.createElement(customIcons[name]);

const spanStyle = {
  fontWeight: 600,
  fontSize: 18,
  margin: '0px 10px',
};

const CustomPaging: React.FC<CustomPagingAPI.ICustomPagingView> = ({ current, total, onChange }) => {
  const btnMouseOut = (event: any) => {
    event?.target?.nodeName == 'BUTTON' ? event?.target?.blur() : event.target.parentNode.blur();
  };

  const btnRender = (disabled: boolean, step: string, opertae: string, icon: string) => {
    return (
      <>
        <Button
          type={'link'}
          icon={addIcon(icon)}
          className="manageBtntTxtStyle"
          onClick={() => {
            onChange(step);
          }}
          disabled={disabled}
        />
      </>
    );
  };

  return (
    <>
      <Row className={'custom-paging'} style={{ paddingTop: '15px' }}>
        <Col span={24} style={{ textAlign: 'center' }}>
          {btnRender(current == 1 || !total, 'prev', '上一条', 'DoubleLeftOutlined')}
          &nbsp;&nbsp; 共<a style={spanStyle}>{total}</a>
          个，当前第
          <a style={spanStyle}>{current}</a>个 &nbsp;&nbsp;
          {btnRender(current == total || !total, 'next', '下一条', 'DoubleRightOutlined')}
        </Col>
      </Row>
    </>
  );
};

export default CustomPaging;
